<!--
 * @Date: 2023-02-24 17:31:06
 * @LastEditTime: 2023-09-08 14:15:58

 * 介绍:
-->
<script lang="ts" setup>
import omit from "lodash/omit";
import type { ObjectFit, ObjectPosition } from "../../types/index";
const props = withDefaults(
  defineProps<{
    src?: string;
    fit?: ObjectFit;
    position?: ObjectPosition;
    alt?: string;
    width?: StrNumber;
    height?: StrNumber;
    radius?: StrNumber;
    round?: boolean;
    size?: StrNumber;
    block?: boolean;
    lazyLoad?: boolean;
    showError?: boolean;
    showLoading?: boolean;
    errorIcon?: string;
    loadingIcon?: string;
    iconSize?: StrNumber;
    iconPrefix?: string;
  }>(),
  {
    showError: true,
    showLoading: true,
    position: "center",
    fit: "contain",
  }
);
const emit = defineEmits<{
  (e: "load", v: Event): void;
  (e: "error"): void;
  (e: "click", v: MouseEvent): void;
}>();
const $props = computed(() => {
  if (!props.size) return omit(props, ["size"]);
  return { ...omit(props, ["size"]), width: props.size, height: props.size };
});
</script>

<template>
  <van-image
    v-bind="($props as any)"
    class="Rimage"
    @load="(e) => emit('load', e)"
    @error="emit('error')"
    @click="(e) => emit('click', e)"
  >
    <template v-slot:loading>
      <slot name="loading"><van-loading type="spinner" /></slot>
    </template>
    <slot></slot>
  </van-image>
</template>

<style lang="scss" scoped></style>
